<template>
  <div class="wrapper">
    <el-row v-for="(item, index) in modelValue">
      <el-col>
        <el-card :body-style="{ padding: '0px' }" class="img_div">
          <div class="imgCSS">
            <el-image :src="getObjectUrl(item)" fit="cover"></el-image>
          </div>

          <div class="mask">
            <span class="dele">
              <IEpDelete class="delete-file" @click="haneleP(index)"></IEpDelete>
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        class="ipload-demo"
        :auto-upload="false"
        :on-exceed="handleExceed"
        accept=".jpg,.png,.jpeg"
        drag
        :show-file-list="false"
        :on-preview="haneleP"
    >
      <IEpPlus/>
    </el-upload>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref, watch, computed} from 'vue'
import type {UploadProps, UploadRawFile, UploadUserFile} from 'element-plus'
import {genFileId} from "element-plus";

const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  }
})
const emit = defineEmits(["update:modelValue"])
const uploadRef = ref("")
const fileList = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit("update:modelValue", val)
  }
})

const handleExceed = (files) => {
  uploadRef.value.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadRef.value!.handleStart(file)
}

const haneleP = (index) => {
  const temp = props.modelValue
  temp.splice(index, 1)
  emit("update:modelValue", temp)
}

const getObjectUrl = (file) => {
  var url = null ;
  if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file.raw) ;
  } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file.raw) ;
  } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file.raw) ;
  }
  return url ;
}


defineExpose({})
</script>

<style scoped lang='less'>
.el-col{
  padding: 6px;
  margin-left: unset;
}
.dele{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.file-name{
  margin: 10px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrapper{
  display: flex;
  align-items: center;
  flex-flow: wrap;
}
.img_div{
  border-radius: 10px;
  display: block;
  position: relative;
  width: 150px;
  text-align: center;
}
:deep(.el-card_body){
  height: 144px;
}
.imgCSS{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 10px;
  .file{
    margin-top: 8px;
    align-content: center;
  }
}
.mask{
  position: absolute;
  background-color: rgba(101,101,101,0.6);
  color: #ffffff;
  opacity: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  z-index: 9999;
}
.mask .delete-file{
  z-index: 9999;
  &:hover{
    cursor: pointer;
  }
}
.img_div:hover .mask{
  opacity: 1;
}
:deep(.el-upload){
  margin-left: 5px;
  width: 148px;
  .el-upload-dragger{
    height: 144px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.avatar-uploader .el-upload{
  border: 1px dashed var(--el-border-color);
  border-right: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  height: 80px;
  text-align: center;
}
</style>